<template>
  <view class="edit-container">
    <view class="toolbar">
      <button @click="addTextItem" class="add-button">添加文本</button>
      <button @click="addImageItem" class="add-button">添加图片</button>
      
      <!-- 添加旋转控制滑动条 -->
      <view v-if="showRotationSlider" class="rotation-control">
        <text class="rotation-label">旋转角度: {{ rotationAngle }}°</text>
        <slider
          class="rotation-slider"
          :value="rotationAngle"
          :min="0"
          :max="360"
          :step="1"
          @change="handleRotationChange"
          show-value
        />
      </view>
    </view>
    
    <SceneView ref="sceneViewRef" />
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import SceneView from '@/components/SceneView/SceneView.vue'

const sceneViewRef = ref(null)
const rotationAngle = ref(0)

// 计算是否显示旋转控制器
const showRotationSlider = computed(() => {
  return sceneViewRef.value?.selectedIndex >= 0
})

// 处理滑动条变化
const handleRotationChange = (e) => {
  const angle = Number(e.detail.value)
  rotationAngle.value = angle
  sceneViewRef.value?.updateRotation(angle)
}

// 监听选中项变化
const watchSelectedItem = () => {
  if (sceneViewRef.value) {
    const selectedIndex = sceneViewRef.value.selectedIndex
    if (selectedIndex >= 0) {
      // 更新滑动条值为当前选中项的旋转角度
      rotationAngle.value = sceneViewRef.value.items[selectedIndex].rotation || 0
    }
  }
}

// 添加项目的方法
const addTextItem = () => {
  sceneViewRef.value?.addItem({
    type: 'text',
    content: '新文本',
    color: '#FF0000',
    rotation: 0  // 初始化旋转角度
  })
}

const addImageItem = () => {
  sceneViewRef.value?.addItem({
    type: 'image',
    content: '你的图片路径',
    color: 'transparent',
    rotation: 0  // 初始化旋转角度
  })
}
</script>

<style lang="scss" scoped>
.edit-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.toolbar {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.add-button {
  padding: 8px 16px;
  background-color: #007AFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.add-button:active {
  opacity: 0.8;
}

.rotation-control {
  margin: 10px 5px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rotation-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  display: block;
}

.rotation-slider {
  width: 100%;
}
</style>
